<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <%@include file="WEB-INF/jspf/HeadDocument.jspf" %>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #formulario
            {
                width: 35%;
            }
        </style>
        <title>JSP Page</title>
        <script type="text/javascript">
            function login() {
                var obj = new Object();
                obj.username = usuario.value;
                obj.password = pass.value;

                $.get("Login", obj , function(data) {
                    localStorage.token = data;
                    location.href = "index.jsp";
                });
            }
        </script>
    </head>
    <body>
        <div id="wrapper">
            <%@include file="WEB-INF/jspf/header.jspf" %>
            <%@include file="/WEB-INF/jspf/menu.jspf" %>
            <section id="contenido">                
                <form id="formulario" onsubmit="login(); return false;">
                    <span class="errorLogin">${mensaje}</span>
                    <div class="contenidoTabla">
                        <label for="usuario">Nombre de Usuario:</label>
                        <br/>
                        <input id="usuario" name="username" type="text" class="text" id="usuario" required="required"/>
                        <br/>
                        <label for="pass">Contraseña:</label>
                        <br/>
                        <input id="pass" name="password" type="password" class="text" id="password" required="required"/>
                        <br/><br/>
                        <input type="submit" class="button" value="Iniciar Sesion"/>
                    </div>                    
                </form>                
            </section>
            <%@include file="WEB-INF/jspf/footer.jspf" %>
        </div>
    </body>
</html>
